<template>
  <el-card class="book-card p-0 cursor-pointer" @click="pushDetail()">
    <img
      style="width: 108px; height: 153px"
      :src="'http://localhost:8181/' + obj.cover"
    />
    <div class="relative">
      <div class="txt text-xs mt-1">{{ obj.name }}</div>
    </div>
  </el-card>
</template>
<script setup>
import { defineProps } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
let props = defineProps(["obj"]);
const pushDetail = () => {
  router.push({ path: "/detail", query: { id: props.obj.id } });
};
</script>
<style scoped lang="less">
.book-card {
  width: 150px;
  height: 200px;
  display: block;
}
.book-card .image {
  width: 150px;
  height: 200px;
}
// .book-card .inner {
//   position: absolute;
//   width: 150px;
//   height: 50px;
//   // background-color: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
//   left: 0px;
//   bottom: 0px;
//   transform: translate(7%, -21%);
// }
.txt {
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
